<template>
    <view class="company">
        <view class="company__item">
            <view class="company__question">公司名称</view>
            <input :value="company" placeholder="请输入公司名称" class="company__input" @input="company = $event.detail.value"/>
        </view>
        <view v-for="(item, index) in questions" class="company__item">
            <view class="company__question">{{ item.q }}</view>
            <input :value="item.a" placeholder="请输入您的问题" class="company__input" @input="handleInput($event,index)"/>
        </view>
        
        <view @click="handleSave" class="company__button company__save">保存</view>
    </view>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { CacheQuestion, CacheCompanyQuestion } from '@/utils/cache'
import navigator from '@/utils/navigator'
import { onLoad } from '@dcloudio/uni-app';

type IQuestions = Array<{q: string, a: string }>
const questions = ref<IQuestions>([])
const company = ref('')
let query: AnyObject | undefined = undefined
onLoad((params) => { 
    query = params
    const q = CacheQuestion.get()
    const index = params?.i
    const cacheCompanyQuestion = CacheCompanyQuestion.get() || []
    let cq: IQuestions =    []
    if(index && cacheCompanyQuestion.length) {
        cq = (cacheCompanyQuestion[index].company) || []
        company.value = cacheCompanyQuestion[index].name || ''
    }
    
    if(cq.length) {
        if(cq.length === q.length) {
            questions.value = cq
        }else {
            const qStr = cq.map(item => item.q)
            q.filter(str => {
                qStr.indexOf(str) === -1 && cq.push({ q: str, a: '' })
            })
            questions.value = cq
        }
    }else {
        questions.value = q?.map(q => ({ q, a: '' })) || []
    }
})
const handleInput = (event, idx) => { 
    questions.value[idx].a = event.detail.value
}
  
const handleSave = () => {
    const result = questions.value
    const rets = CacheCompanyQuestion.get()
    const index = query?.i
    if(index) {
        rets[index] = { company: result, name: company.value }
    }else {
        rets.push({ company: result, name: company.value  })
    }
    
    CacheCompanyQuestion.set(rets)
    navigator.navigateBack({
        beforeMessage: '保存成功'
    })
}
 
</script>

<style scoped lang="scss">
.company {
    padding: 16px;
    &__item {
        margin-bottom: 16px;
    }
     
    &__button {
        padding: 8px 16px;
        border: solid 1px $uni-text-color-disable;
        color: $uni-text-color;
        text-align: center;
        font-size: 14px;
        border-radius: 8px;
    }
    &__save {
        margin-top: 16px;
        background-color: $uni-color-primary;
        color: white;
    }
    &__input {
        flex: 1;
        padding: 8px 16px;
        border: 1px solid #e8e8e8;
        border-radius: 8px;
        font-size: 14px;
    }
    &__question {
        font-size: 14px;
        color: $uni-text-color;
        padding-bottom: 4px;
    }
}
</style>